<template>
  <!-- 催收执行页-案件催收状态 -->
  <section class="component case-collection-state panel">
    <el-card header="案件催收状态" class="no-shadow">
      <el-row>
        <el-col :span="8">
          <span>部门剩余催收天数：</span>
          <span>{{ caseInfo.partCollectionRemainingDays }}</span>
        </el-col>
        <el-col :span="8">
          <span>个人催收剩余天数：</span>
          <span>{{ caseInfo.personalCollectionRemainingDays }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span>留案标识：</span>
          <span>{{
            $filter.dictConvert(caseInfo.leaveCaseFlag, "CommonFlag")
          }}</span>
        </el-col>
        <el-col :span="8">
          <span>留案到期日期：</span>
          <span>{{ $filter.dateFormat(caseInfo.leaveDueDate) }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span>电催协催标识：</span>
          <span>{{
            $filter.dictConvert(caseInfo.telAssistFlag, "CommonFlag")
          }}</span>
        </el-col>
        <el-col :span="8">
          <span>外访协催标识：</span>
          <span>{{
            caseInfo.assistFlag
              ? caseInfo.assistFlag === "DISABLED"
                ? "否"
                : "是"
              : ""
          }}</span>
        </el-col>
        <el-col :span="8">
          <span>法催协催标识：</span>
          <span>{{
            $filter.dictConvert(caseInfo.legalAssistFlag, "CommonFlag")
          }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span>是否停催：</span>
          <span>{{
            $filter.dictConvert(caseInfo.pauseFlag, "CommonFlag")
          }}</span>
        </el-col>
        <el-col :span="8">
          <span>停催到期日期：</span>
          <span>{{ $filter.dateTimeFormat(caseInfo.pauseDueTime) }}</span>
        </el-col>
        <el-col :span="8">
          <span>风险客户标识：</span>
          <span>{{
            $filter.dictConvert(caseInfo.riskFlag, "CommonFlag")
          }}</span>
          <el-button class="edit-button" v-if="isTelShow" @click="onClickEdit"
            >更改</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { namespace } from "vuex-class";
import { Dependencies } from "~/core/decorator";
import { MENU_CHANNEL } from "~/config/enum.config";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service.ts";
import { components } from "./collection-add-list";
const CollectionExecutionModule = namespace("collection-execution");
@Component({ components: {} })
export default class CaseCollectionState extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(DataImportExcelInfoService)
  private dataImportExcelInfoService: DataImportExcelInfoService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;

  private caseInfo: any = {};

  @Watch("caseId")
  private onCaseIdChange() {
    this.refreshData();
  }

  private get isTelShow() {
    const arr = [
      MENU_CHANNEL.Tel_personal,
      MENU_CHANNEL.Tel_team,
      MENU_CHANNEL.Assist_tel
    ];
    return arr.find(v => this.menuChannel === v);
  }

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    if (this.menuChannel === MENU_CHANNEL.Case_imported) {
      this.dataImportExcelInfoService
        .getImportCaseInfo(this.caseId)
        .subscribe(data => (this.caseInfo = data));
    } else {
      this.caseOperatorPageService
        .queryCaseInfo(this.caseId)
        .subscribe(data => (this.caseInfo = data));
    }
  }
  private onClickEdit() {
    return this.$confirm("确认更改风险客户标识?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      this.$emit("close");
      this.caseOperatorPageService.modifyRiskFlag(this.caseId).subscribe(
        data => {
          this.$message.success("操作成功!");
          this.refreshData();
        },
        err => {
          this.$message.success("操作失败!");
        }
      );
    });
  }
}
</script>

<style lang="less" scoped>
.component.case-collection-state {
  .el-row {
    line-height: 20px;
  }
  .info-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 170px);
    grid-column-gap: 5px;
    grid-row-gap: 2px;
    list-style: none;
    li {
      > :first-child {
        color: #606266;
        &:after {
          content: "：";
        }
      }
    }
  }
}
</style>
